<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="订单详情"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <img class="banner" src="../../assets/orderbanner.png" alt="" />
    <div class="step">
      <div class="topstep">
        <div
          :class="
            order.status == '2' || order.status == '3' || order.status == '7'
              ? 'num active'
              : 'num'
          "
        >
          1
        </div>
        <div
          :class="
            order.status == '3' || order.status == '7'
              ? 'space active'
              : 'space'
          "
        ></div>
        <div
          :class="
            order.status == '3' || order.status == '7' ? 'num active' : 'num'
          "
        >
          2
        </div>
        <div :class="order.status == '7' ? 'space active' : 'space'"></div>
        <div :class="order.status == '7' ? 'num active' : 'num'">3</div>
      </div>
      <div class="bottomstep">
        <div
          :class="
            order.status == '2' || order.status == '3' || order.status == '7'
              ? 'words activewords'
              : 'words'
          "
        >
          进行中
        </div>
        <div
          :class="
            order.status == '3' || order.status == '7'
              ? 'words activewords'
              : 'words'
          "
        >
          待反馈
        </div>
        <div :class="order.status == '7' ? 'words activewords' : 'words'">
          已完结
        </div>
      </div>
    </div>
    <div class="cell">
      <div>订单编号</div>
      <div>{{ order.trustSn }}</div>
    </div>
    <div class="cell" v-if="order.house.house_id">
      <div>房源编号</div>
      <div>{{ order.house.house_id }}</div>
    </div>
    <div class="cell">
      <div>订单名称</div>
      <div v-if="order.trustType == '1'">房源录入</div>
      <div v-if="order.trustType == '2'">交割服务</div>
      <div v-if="order.trustType == '3'">交易服务</div>
      <div v-if="order.trustType == '4'">金融服务</div>
      <div v-if="order.trustType == '5'">带看服务(二手房)</div>
      <div v-if="order.trustType == '6'">新房咨询单</div>
      <div v-if="order.trustType == '7'">新房团购单</div>
      <div v-if="order.trustType == '9'">购房定制需求单</div>
      <div v-if="order.trustType == '10'">租房定制需求单</div>
    </div>
    <div class="cell">
      <div>下单时间</div>
      <div>{{ time }}</div>
    </div>
    <div class="cell" v-if="time2">
      <div>服务时间</div>
      <div>{{ time2 }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '7'">
      <div>房源名称</div>
      <div>{{ order.house.subdistrict }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '1'">
      <div>小区名称</div>
      <div>{{ order.house.subdistrict }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '1'">
      <div>房源地址</div>
      <div>{{ order.address }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '7'">
      <div>单价</div>
      <div>{{ order.house.selling_price }}/㎡</div>
    </div>
    <div class="cell" v-if="order.trustType == '10'">
      <div>房源区域</div>
      <div>{{ order.city }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '10'">
      <div>租赁类型</div>
      <div>{{ order.rental_way }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '10'">
      <div>价格范围</div>
      <div>{{ order.min_price }}~{{ order.max_price }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '10'">
      <div>房间户型</div>
      <div>{{ order.house_type }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '9'">
      <div>购房预算(首付)</div>
      <div>{{ order.first_money }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '9'">
      <div>户型</div>
      <div>{{ order.house_type }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '9'">
      <div>面积</div>
      <div>{{ order.house_acre }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '9'">
      <div>区域</div>
      <div>{{ order.city }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '9'">
      <div>预计购买时间</div>
      <div>{{ order.expect_month }}</div>
    </div>
    <!-- <div class="cell">
      <div>结束时间</div>
      <div>{{ order.finishTime }}</div>
    </div> -->
    <div class="info">
      <div>
        {{ order.releaseUsername }}先生/女士<span v-if="order.release_role == 3"
          >业主</span
        ><span v-if="order.release_role == 5">买家</span>
        <div style="flex: 1"></div>
        <van-icon size="20px" @click="call" name="phone-o" />
      </div>
      <!-- <div class="name">
        X先生(女士)<span>业主</span>
        <div style="flex: 1"></div>
        <van-icon name="phone-o" />
      </div> -->
    </div>
    <div class="cell">
      <div>服务评价</div>
      <div v-show="!order.isEvaluate">
        待<span v-if="order.release_role == 3">业主</span
        ><span v-if="order.release_role == 5">买家</span>评价
      </div>
      <div v-show="order.isEvaluate">{{ order.evaluate }}分</div>
    </div>
    <div class="cell">
      <div>服务效率</div>
      <div v-show="order.serviceEfficiency == '0'">分值暂无</div>
      <div v-show="order.serviceEfficiency != '0'">
        {{ order.serviceEfficiency }}分
      </div>
    </div>
    <div class="cell">
      <div>服务态度</div>
      <div v-show="order.serviceAttitude == '0'">分值暂无</div>
      <div v-show="order.serviceAttitude != '0'">
        {{ order.serviceAttitude }}分
      </div>
    </div>
    <div class="cell">
      <div>服务准时</div>
      <div v-show="order.serviceOnTime == '0'">分值暂无</div>
      <div v-show="order.serviceOnTime != '0'">{{ order.serviceOnTime }}分</div>
    </div>
    <div class="cell">
      <div>专业素养</div>
      <div v-show="order.specialtyLiteracy == '0'">分值暂无</div>
      <div v-show="order.specialtyLiteracy != '0'">
        {{ order.specialtyLiteracy }}分
      </div>
    </div>
    <div class="cell">
      <div>服务形象</div>
      <div v-show="order.serviceImage == '0'">分值暂无</div>
      <div v-show="order.serviceImage != '0'">{{ order.serviceImage }}分</div>
    </div>
    <div class="tipwords">
      <div>*服务评价与经纪人星级变化相关，十分重要</div>
      <div>
        *服务完结后<span class="h">24H</span>内平台自动结算佣金至个人钱包
      </div>
    </div>
    <div
      v-show="
        order.trustType == '1' ||
        order.trustType == '6' ||
        order.trustType == '7'
      "
      style="border: none"
      class="cell"
    >
      <div>服务佣金</div>
      <div><span class="partmoney">0.00</span> 元</div>
    </div>
    <!-- <div v-show="order.trustType == '5'" style="border: none" class="cell">
      <div>服务佣金</div>
      <div><span class="partmoney">100</span>元</div>
    </div> -->
    <div
      v-show="
        order.trustType == '2' ||
        order.trustType == '3' ||
        order.trustType == '4'
      "
      class="bigcell"
    >
      <div>
        <div>服务佣金</div>
        <div>总额</div>
      </div>
      <div>
        <div>
          <div class="intpart">{{ order.listedPrice }}</div>
          <div class="word">实际成交额(万)</div>
        </div>
        <div>*</div>
        <div>
          <div class="intpart">{{ order.ratio }}%</div>
          <div class="word word2">&emsp;费用比例&emsp;</div>
        </div>
        <div>=</div>
        <div>
          <div class="intpart">
            {{ ((order.listedPrice * order.ratio) / 100).toFixed(3) }}
          </div>
          <div class="word">支付费用(万)</div>
        </div>
      </div>
    </div>
    <div class="call">
      <img
        src="@/assets/call.png"
        alt=""
        width="12px"
        style="margin-right: 3px"
      /><a style="color: #45b7cb" href="tel:4000007173">联系客服</a>
    </div>
    <div class="space"></div>
    <div class="btnpart">
      <div class="owords">
        *实际成交金额如不符可修改，将为经纪人追收或退还佣金
      </div>
      <button @click="back">朕知道啦~~</button>
      <div class="safe"></div>
    </div>
  </div>
</template>

<script>
import { grabOrderInfo } from "../../apis/user";
import { baseUtils } from "@/utils/baseUtils";
export default {
  data() {
    return {
      time: "",
      time2: "",
      trustId: "",
      order: {},
      price: "",
    };
  },
  created() {
    this.trustId = this.$route.query.trustId;
    grabOrderInfo({ trustId: this.trustId }).then((res) => {
      console.log(res);
      if (res.code == 201) {
        this.order = res.result;
        this.time = res.result.createTime == "" ? "" : res.result.createTime;
        this.time2 =
          res.result.expectedTime == "" ? "" : res.result.expectedTime;
        this.price = (
          (res.result.listedPrice / res.result.coveredArea) *
          10000
        ).toFixed(3);
      }
    });
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    call() {
      window.location.href = `tel:${this.order.releaseUserMobile}`;
    },
  },
};
</script>

<style lang="less" scoped>
.h {
  color: #d43b33;
}
.call {
  text-align: center;
  font-size: 12px;
  color: #45b7cb;
  margin-top: 10px;
}
.banner {
  width: 100%;
}
.step {
  margin: 0 70px;
  .topstep {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    .num {
      text-align: center;
      width: 30px;
      height: 30px;
      line-height: 30px;
      background-color: #ccc;
      color: #fff;
      border-radius: 50%;
    }
  }
  .space {
    flex: 1;
    height: 5px;
    background-color: #ccc;
  }
  .bottomstep {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    .words {
      font-size: 13px;
      color: #999;
    }
  }
  .active {
    color: #fff !important;
    background-color: #45b7cb !important;
  }
  .activewords {
    color: #45b7cb !important;
  }
}
.cell {
  margin: 0 15px;
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  color: #333;
  > div {
    display: flex;
    align-items: center;
    &:first-child {
      font-weight: bold;
    }
    &:last-child{
      overflow: hidden;
      max-width: 53.3vw;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: block;
    }
  }
  .partmoney {
    font-weight: bold;
    font-size: 20px;
    color: #45b7cb;
  }
}
.info {
  > div {
    display: flex;
    margin: 15px;
    align-items: center;
    justify-content: space-around;
    &:first-child {
      color: #333;
      span {
        color: #fff;
        font-size: 10px;
        background-color: #45b7cb;
        padding: 2px 5px;
        border-radius: 10px;
      }
      .van-icon {
        color: #45b7cb;
      }
    }
    &:last-child {
      > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #333;
        > div {
          &:first-child {
            font-size: 16px;
          }
          &:nth-child(2) {
            font-size: 14px;
          }
          &:nth-child(3) {
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            span {
              color: #d43b33;
            }
          }
        }
      }
    }
  }
  .name {
    color: #333;
    span {
      color: #fff;
      font-size: 10px;
      background-color: #45b7cb;
      padding: 0 5px;
      border-radius: 10px;
      margin-left: 3px;
    }
    .van-icon {
      color: #45b7cb;
    }
  }
}
.tipwords {
  font-size: 12px;
  color: #999;
  margin: 15px;
  & > div:nth-child(1) {
    margin-bottom: 10px;
  }
}
.bigcell {
  > div {
    &:first-child {
      margin: 0 15px;
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
      color: #333;
      div {
        &:first-child {
          font-weight: bold;
        }
      }
    }
    &:nth-child(2) {
      display: flex;
      margin: 0 15px;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      .word {
        font-size: 13px;
        color: #999;
      }
      .word2 {
        padding: 0 5px;
      }
      .intpart {
        font-weight: bold;
        border: 1px solid #ddd;
        padding: 3px 0;
        margin-bottom: 5px;
      }
    }
  }
}
.space {
  height: 100px;
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  border-top: 1px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  .owords {
    font-size: 13px;
    color: #999;
    margin-bottom: 5px;
    transform: scale(calc(10 / 12));
  }
  button {
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 90%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>